<template>
  <div>
    <Header />
    <div class="app-warrper">
        <Tools />
        <div class="app-content">
          <Canvas />
        </div>
        <Panel />
    </div>
    <Dialog></Dialog>
  </div>
</template>

<script setup>
import Header from './components/Header.vue';
import Tools from './components/Tools.vue';
import Canvas from './components/Canvas.vue';
import Panel from './components/Panel.vue';
import Dialog from './components/Dialog.vue';
</script>

<style>
 @font-face {
  font-family: "Oswald";
  src: url("./assets/font/Oswald-Regular.ttf");
}

html,body,#app {
  width: 100%;
  height: 100vh;
  overflow-x:auto;
  overflow-y: hidden;
}
.app-warrper{
  width: 100%;
  height: calc(100vh - 45px);
  display: flex;
  align-items: center;
}
.app-content{
  flex: 1;
  height: calc(100vh - 45px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #444548;
  overflow: hidden;
}
</style>
